<template>
	<view class="bgIndex ">
	<!-- 	<view class="suspension" @click="addEmployeeSuspension()">
			
		</view> -->
	<!-- 	<view :style="{ height: heightSystemss + 'px' }"></view>
		<sunui-navbar v-if="tabList.length>=1" :items="tabList" lineHeight="70rpx" :isCenter="false"
			:currentIndex="currentIndex" padding="12rpx" activeColor="#000000" :size="65" activeLineBg="#785DF6"
			textAlign="center" activeLineWidth="100%" activeDirection="space-between" activeLineHeight="6rpx"
			bgColor="transparent" :margin="10" @change="e=>getChange(e,tabList[e].id)"></sunui-navbar> -->
		<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :down="downOption">
			<view v-for="(item,index) in list" class="" :key="index">

				<view class="flex-between padding20">
					<view class="flex-start-center" @click="circleDetailsFn(item.id)">
						<image class="img" :src="item.avatar" mode=""></image>
						<view class="margin-left_10rpx">
							<view class="font-weight " style="color: #666666;margin-bottom: 10rpx;">

								{{item.nickname}}


							</view>
							<view class="flex">
								<text style="margin-right: 10rpx;color: #C0C0C0;">{{item.create_time}}</text>

							</view>
						</view>
					</view>
					<view v-if="useId!==item.uid" :class="item.is_follow==0?'followBtn flex':'NowFollowBtn flex'"
						@click="followUserFn(item.uid,item.is_follow)">
						{{item.is_follow==0? '关注':'已关注'}}
					</view>
				</view>
				<view class="evaluationsContent">
					<view class="flex-start-center-wrap">
						<view class="evaluationsTitle">
							{{item.title}}
						</view>
						
							<view class="margin-bottom_20rpx " v-for="(items,i) in item.notice_user_list" :key="i">
								<text class="margin-left_10rpx" style="color: #7E5CFF;">@{{items.nickname}}</text>
							</view>
						
					
					</view>

					<view class="flex-start-center-wrap ">

						<block v-for="(img,indexs) in item.img" :key="indexs">
							<image class="image" :src="img" @click="imgScare(item.img,2,indexs)" mode="aspectFill"></image>
						</block>
					</view>
					<view class="margin-top_30rpx">
						<view class="flex-start-center" v-if="item.city_name">
							<image class="imgAddress" :src="path" mode=""></image>
							<view class="">
								{{item.city_name}}
							</view>
						</view>
					</view>
					<view class="flex-between margin-top_30rpx">
						
						<view class="flex-start-center" v-if="item.status==2">
							<view class="flex-start-center" >
								
								
								<text style="color:#0191FF;margin-bottom: 5rpx;margin-left: 5rpx">审核通过✔</text>
								
							</view>
							<view class="flex-start-center" style="margin-right: 5rpx;" @click="deleteFn(item.id)">
								
								<uni-icons color="#ff0000" type="trash" size="20"></uni-icons>
							
								
								<text style="color:#ff0000;margin-bottom: 5rpx;margin-left: 5rpx">删除</text>
							</view>
						</view>
						<view class="flex-start-center">
							
							<view class="flex-start-center" style="margin-right: 5rpx;" v-if="item.status==1||item.status==3" @click="editFn(item.id)">
								
								<uni-icons color="#999999" type="compose" size="20"></uni-icons>
							
								<!-- <image class="share" :src="share" mode=""></image> -->
								<text style="color: rgb(153, 153, 153);margin-bottom: 5rpx;margin-left: 5rpx">编辑</text>
							</view>
							<view class="flex-start-center" style="margin-right: 5rpx;" v-if="item.status==1||item.status==3"  @click="deleteFn(item.id)">
								
								<uni-icons color="#ff0000" type="trash" size="20"></uni-icons>
							
								<!-- <image class="share" :src="share" mode=""></image> -->
								<text style="color:#ff0000;margin-bottom: 5rpx;margin-left: 5rpx">删除</text>
							</view>
						
						</view>
					
						<view class="flex-start-center ">
		
							<view class="" style="margin-right: 13rpx;"
								@click="circleLikesFn(item.id,item.is_like)">
							
								<uni-icons class="share" :color="item.is_like==1?'#fba1ab':'#999999'"
									:type="item.is_like==1?'heart-filled':'heart'" size="20"></uni-icons>
							
								<text style="color: rgb(153, 153, 153);margin-bottom: 5rpx;vertical-align: baseline;">{{item.like_number}}</text>
							</view>
							<!-- 评价列表 -->
							<view class="flex-start-center" @click="circleDetailsFn(item.id)">
								<image class="share" :src="comment" mode=""></image>
								<text
									style="color: rgb(153, 153, 153);margin-bottom: 5rpx;">{{item.comment_number}}</text>
							</view>
						</view>
					</view>
					<view class="flex-start-center margin-top_10rpx" v-if="item.status==3">
						
						
						<text style="color: red;margin-bottom: 5rpx;margin-left: 5rpx">驳回原因:{{item.remark}}</text>
					</view>
				</view>

			</view>
		</mescroll-body>
	</view>


</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				share:this.$img.share,
				comment:this.$img.comment,
                path:this.$img.path,
				userInfo: uni.getStorageSync("userInfo"),
				useId: uni.getStorageSync("userInfo").id,
				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				heightSystemss: 0,
				currentIndex: 1,
				pictureList: ['http://yunhunjian123.oss-cn-shanghai.aliyuncs.com/2024-06-08/fc702202406081504044654.png',
					'http://yunhunjian123.oss-cn-shanghai.aliyuncs.com/2024-06-08/7ab91202406081504112378.png',
					'http://yunhunjian123.oss-cn-shanghai.aliyuncs.com/2024-06-08/fc702202406081504044654.png',
					'http://yunhunjian123.oss-cn-shanghai.aliyuncs.com/2024-06-08/fc702202406081504044654.png'
				],
				tabList: [{
						name: '搭子',
						id: '1' //null
					}, {
						name: '圈子',
						id: '2' //null
					},

					{
						name: '服务',
						id: '3' //null
					},
					{
						name: '社交',
						id: '4' //null
					},
					{
						name: '关注',
						id: '5' //null
					},
					{
						name: '社群',
						id: '6' //null
					},

				],
				list: [],
				windowHeight: ''
			}
		},
		onLoad() {

			// this.createdgetSystemInfo()

		},
		onShow() {
			// this.templateTpo()
			this.$nextTick(() => {
				this.mescroll?.resetUpScroll();
			})
		},
		
		
		methods: {
			deleteFn(id){
				if(this.userInfo.disable==0){
					this.$sun.toast('该用户已被拉黑','none')
				}else{
					uni.showModal({
						title: '提示',
						content: '是否要删除该条信息',
						success: async (res) => {
							if (res.confirm) {
					
								const result = await this.$http.post({
									url: this.$api.updateCircleStatus,
									data: {
										status: 4,
										id: id,
					
					
									},
									headers: {
										'Authorization': this.userInfo.token
									}
					
								})
								if (result.code == 0) {
									
									this.$sun.toast(result.message, 'none')
									
									setTimeout(()=>{
										this.mescroll?.resetUpScroll();
									},500)
					
								} else {
					
									this.$sun.toast(result.message, 'none')
								}
							} else if (res.cancel) {
					
							}
						}
					});
				}
			},
			editFn(id){
				if(this.userInfo.disable==0){
					this.$sun.toast('该用户已被拉黑','none')
				}else{
					this.$sun.navGo('/pagesB/index/publishCircle',{id:id})
				}
			},
			async followUserFn(uid, follow) {
				if(this.userInfo.disable==0){
					this.$sun.toast('该用户已被拉黑','none')
				}else{
					if(follow==0){
						this.templateTpo()
					}
					const result = await this.$http.post({
						url: this.$api.followUser,
						data: {
							follow: follow == 0 ? 1 : 0,
							uid: uid
					
						},
						headers: {
							'Authorization': this.userInfo.token
						}
					
					})
					if (result.code == 0) {
						console.log(result)
						setTimeout(() => {
							this.$sun.toast(result.message, 'none')
						}, 500)
						this.$nextTick(() => {
					
							this.mescroll?.resetUpScroll();
						})
					
					
					} else {
					
						this.$sun.toast(result.message, 'none')
					}
				}

			},
			// 订阅消息
			async templateTpo() {
				
					wx.requestSubscribeMessage({
						tmplIds: JSON.parse(JSON.stringify(uni.getStorageSync("messageListTemplate"))),
						success: res => { //成功、
							if (res[Object.keys(res)[0]] == "accept") {
								console.log(res)
								// this.$sun.toast("成功订阅")
							} else {
								uni.showModal({
									title: "温馨提示",
									content: "点击右上角的「...」按钮，找到「订阅消息」相关选项，并设定为「接收」状态方可再次订阅"
								})
							}
						},
						fail: err => { //失败
							this.$sun.toast("订阅消息配置失败");
						}
					})
			
			},
			async circleLikesFn(id, like) {
				console.log(like)
				const result = await this.$http.post({
					url: this.$api.circleLike,
					data: {
						is_like: like == 0 ? 1 : 0,
						id: id,

					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})
				if (result.code == 0) {
					console.log(result)
					setTimeout(() => {
						this.$sun.toast(result.message, 'none')
					}, 500)
					this.$nextTick(() => {

						this.mescroll?.resetUpScroll();
					})


				} else {

					this.$sun.toast(result.message, 'none')
				}
			},
			circleDetailsFn(id) {
				this.$sun.navGo('/pages/index/reviewDetails', {
					uid: id
				})

			},
			async upCallback(scroll) {
				const result = await this.$http.post({
					url: this.$api.circleList,
					data: {
						page: scroll.num,
						limit: 10,
						is_oneself_uid: this.userInfo.id,

					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})


				if (result.code == 0) {

					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];
					result.data.list.forEach((item) => {
						
						if(item.img.includes(',')){
							item.img = item.img.split(',').map((item) => item.trim());
						}else{
							if(item.img.length){
								item.img = item.img.split().map((item) => item.trim());
							}else{
								item.img = []
							}
						}
					})
					this.list = this.list.concat(result.data.list);

					console.log('this.list', this.list, this.list.length);
				} else {
					this.$sun.toast(result.message, 'none')
				}


			},
			getChange(index, e) {
				console.log(index, e)

				this.currentIndex = index

			},
			addEmployeeSuspension() {
				this.$sun.navGo('/pages/index/publishCircle')
			},
			imgScare(img,len,index) {
				console.log(img)
				
				if(len==1){
					uni.previewImage({
						urls: [img],
						longPressActions: {
							itemList: ['发送给朋友', '保存图片', '收藏'],
							success: function(data) {
								
							},
							fail: function(err) {
								
							}
						}
					});
				}else{
					uni.previewImage({
						urls: img,
						current:index,
						longPressActions: {
							itemList: ['发送给朋友', '保存图片', '收藏'],
							success: function(data) {
								
							},
							fail: function(err) {
								
							}
						}
					});
				}
			
			
			},
			// imgScare(img) {
			// 	console.log(img)
			// 	uni.previewImage({
			// 		urls: [img],
			// 		longPressActions: {
			// 			itemList: ['发送给朋友', '保存图片', '收藏'],
			// 			success: function(data) {
			// 				console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
			// 			},
			// 			fail: function(err) {
			// 				console.log(err.errMsg);
			// 			}
			// 		}
			// 	});


			// },
			createdgetSystemInfo() {
				let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
				uni.getSystemInfo({
					//获取系统信息
					success: res => {
						let navHeight = menuButtonObject.height + (menuButtonObject.top - res
							.statusBarHeight) * 2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
						this.heightSystemss = navHeight;

						this.windowHeight = res.windowHeight * 2 - 800;
					},
					fail(err) {
						console.log(err);
					}
				});
			},
			evaluateFn() {
				this.$sun.navGo('/pages/index/reviewDetails')
			}
		}
	}
</script>

<style lang="less" scoped>
	.bgIndex {
		.suspension {
			position: fixed;
			right: 0rpx;
			width: 100rpx;
			bottom: 500rpx;
			height: 100rpx;
			border-radius: 50%;
			background-color: #fff;
			text-align: center;
			line-height: 100rpx;
			z-index: 999;
			filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.15));

			.addIcon {

				width: 100rpx;
				height: 100rpx;
			}
		}

		.img {
			width: 104rpx;
			height: 104rpx;
			border-radius: 50%;
		}

		.followBtn {
			border-radius: 100rpx;
			width: 120rpx;
			height: 60rpx;
			color: #fff;
			background: linear-gradient(90.00deg, rgb(162, 101, 252), rgb(223, 111, 252) 100%);
		}

		.NowFollowBtn {
			border-radius: 100rpx;
			width: 120rpx;
			height: 60rpx;
			color: rgb(153, 153, 153);
			background: rgb(238, 238, 239);
		}
         
		.evaluationsContent {

			padding: 0rpx 80rpx 20rpx 122rpx;
			border-bottom: 3rpx solid #F4F4F4;

			.evaluationsTitle {
				color: #333;
				margin: 0 0 20rpx;
				font-size: 28rpx;
			}

			.image {
				width: 176rpx;
				height: 176rpx;
				border-radius: 20rpx;
				padding: 5rpx;
			}

			.imgAddress {
				margin-right: 8rpx;

				width: 26.66rpx;
				height: 32rpx;
			}

			.share {
				width: 35rpx;
				height: 35rpx;
				vertical-align: middle;
				margin-right: 5rpx;
			}
		}


	}
</style>